<template>
  <div class="health-box" style="padding-right: 12px">
    <div class="title-box">
      <div class="dateTime">
        <div class="date">
          <a-date-picker
            v-model:value="dateValue"
            :format="monthFormat"
            :allowClear="false"
            picker="month"
            @panelChange="handlePanelChange"
            @openChange="openChange"
            @change="onYearChange"
            :disabled-date="disabledDate"
          >
            <template #monthCellRender="{ current }">
              <p
                :class="[
                  'time',
                  dateList[current.month()].iscurrent == true ? 'health-dates' : '',
                  dateList[current.month()].iscurrentMonth == true ? 'default-active' : ''
                ]"
              >
                {{ current.month() + 1 }}月
              </p>
              <p
                :class="[
                  'health-point',
                  dateList[current.month()].iscurrent == true ? 'on' : '',
                  dateList[current.month()].ishave == true ? 'health-active' : ''
                ]"
              />
            </template>
          </a-date-picker>
        </div>
      </div>
      <div class="list">
        <div class="aspin" v-if="loading">
          <a-spin />
        </div>
        <div v-else>
          <template v-if="diaryList && diaryList.length > 0">
            <div class="item" v-for="(item, index) in diaryList" :key="index">
              <div class="left">
                <p>{{ transformTimeTwo(item.publishTime, 'monthDay') }}</p>
                <p>{{ transformTimeTwo(item.publishTime, 'year') }}年</p>
              </div>
              <div class="min" />
              <div class="minBorder" />
              <div class="right">
                <div class="stateList">
                  <p v-for="(itemTwo, j) in JSON.parse(item.extParam)" :key="j">
                    {{ itemTwo }}
                  </p>
                </div>
                <div class="urlImg">
                  <a-image
                    class="img"
                    v-for="(itemThree, n) in item.picList"
                    :key="n"
                    :src="itemThree.fileUrl"
                    mode="aspectFit"
                  />
                </div>
                <pre style="white-space: pre-wrap">{{ item.content }}</pre>
              </div>
            </div>
          </template>
          <a-empty v-else />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { heppatientdiaryMonthList, heppatientdiaryList } from '@/api/patientMana/index.ts'
import { RightOutlined } from '@ant-design/icons-vue'
import dayjs, { Dayjs } from 'dayjs'
const transformTimeTwo = (date, month) => {
  let d = '',
    m = '',
    datetime = '',
    day = ''
  // dateFormat;
  // dateFormat = date.replace(/\-/g, '/')
  // dateFormat = date.replace(/\//g, '-')
  // d = new Date(dateFormat)
  // console.log(1111222);
  // console.log(date);

  d = new Date(date)
  m = d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1
  day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate()

  if (month == 'month') {
    datetime = m
  } else if (month == 'year') {
    datetime = d.getFullYear()
  } else if (month == 'monthDay') {
    datetime = m + '月' + day + '日'
  } else {
    datetime = d.getFullYear() + '/' + m
  }
  return datetime
}
const monthFormat = 'YYYY/MM'
// const dateValue = ref(dayjs(transformTimeTwo(new Date('2024/9').getTime(), ''), monthFormat))
const dateValue = ref('')
const openShow = ref(false)
const dateList = ref([])
const dateListYear = ref('')
const dateListMon = ref('')
const dateListMonOld = ref('')
const empiValue = ref('')
const loading = ref(false)
const diaryList = ref([])
const init = async (id) => {
  loading.value = true
  dateValue.value = dayjs(transformTimeTwo(new Date().getTime(), ''), monthFormat)
  dateListYear.value = transformTimeTwo(new Date().getTime(), 'year')
  dateListMon.value = transformTimeTwo(new Date().getTime(), 'month')
  dateListMonOld.value = transformTimeTwo(new Date().getTime(), 'month')
  empiValue.value = id
  await heppatientdiaryMonthListFun(dateListYear.value)
  await heppatientdiaryListFun()
}
// 获取时间
const heppatientdiaryMonthListFun = (year) => {
  const param = {
    empi: empiValue.value,
    // empi: '6354asd54a645d',
    year: year ? year : dateListYear.value
  }
  heppatientdiaryMonthList(param).then((res) => {
    const dataLists = res.data
    if (dataLists && dataLists.length > 0) {
      for (let i = 0; i < dataLists.length; i++) {
        if (year == dateListYear.value) {
          if (dataLists[i].month == dateListMonOld.value) {
            dataLists[i].iscurrentMonth = true
          } else {
            dataLists[i].iscurrentMonth = false
          }
          if (dataLists[i].month == dateListMon.value) {
            dataLists[i].iscurrent = true
          } else {
            dataLists[i].iscurrent = false
          }
        } else {
          dataLists[i].iscurrentMonth = false
          if (year) {
            dataLists[i].iscurrent = false
          } else {
            if (dataLists[i].month == dateListMon.value) {
              dataLists[i].iscurrent = true
            } else {
              dataLists[i].iscurrent = false
            }
          }
        }
      }
      dateList.value = dataLists
    } else {
      dateList.value = [
        {
          ishave: false,
          num: 1,
          iscurrent: false,
          iscurrentMonth: false
        },
        {
          ishave: false,
          num: 2,
          iscurrent: false,
          iscurrentMonth: false
        },
        {
          ishave: false,
          num: 3,
          iscurrent: false,
          iscurrentMonth: false
        },
        {
          ishave: false,
          num: 4,
          iscurrent: false,
          iscurrentMonth: false
        },
        {
          ishave: false,
          num: 5,
          iscurrent: false,
          iscurrentMonth: false
        },
        {
          ishave: false,
          num: 6,
          iscurrent: false,
          iscurrentMonth: false
        },
        {
          ishave: false,
          num: 7,
          iscurrent: false,
          iscurrentMonth: false
        },
        {
          ishave: false,
          num: 8,
          iscurrent: false,
          iscurrentMonth: false
        },
        {
          ishave: false,
          num: 9,
          iscurrent: false,
          iscurrentMonth: false
        },
        {
          ishave: false,
          num: 10,
          iscurrent: false,
          iscurrentMonth: false
        },
        {
          ishave: false,
          num: 11,
          iscurrent: false,
          iscurrentMonth: false
        },
        {
          ishave: false,
          num: 12,
          iscurrent: false,
          iscurrentMonth: false
        }
      ]
      for (let i = 0; i < dateList.value.length; i++) {
        if (dateList[i].num == dateListMonOld.value) {
          dateList[i].iscurrentMonth = true
        } else {
          dateList[i].iscurrentMonth = false
        }
      }
    }
  })
}
const heppatientdiaryListFun = () => {
  diaryList.value = []
  const param = {
    empi: empiValue.value,
    // empi: 'cf9f8460692912298707fd57867f81fe',
    year: dateListYear.value,
    month: dateListMon.value
  }
  heppatientdiaryList(param).then((res) => {
    loading.value = false
    diaryList.value = res.data && res.data.length > 0 ? res.data : []
  })
}
// 弹窗时间
const disabledDate = (current) => {
  return current && current > new Date()
}
const openChange = () => {
  if (openShow.value == true) {
    openShow.value = false
  } else {
    openShow.value = true
  }
}
const handlePanelChange = (value) => {
  const year = value.format('YYYY')
  if (openShow.value && value) {
    heppatientdiaryMonthListFun(year)
  }
}
const onYearChange = (date, dateString) => {
  loading.value = true
  // 点击月份
  dateValue.value = dayjs(transformTimeTwo(new Date(dateString).getTime(), ''), monthFormat)
  const timeValue = dateString.split('/')
  dateListYear.value = timeValue[0]
  dateListMon.value = Number(timeValue[1])
  for (let i = 0; i < dateList.value.length; i++) {
    dateList.value[i].iscurrent = false
    if (Number(timeValue[1]) == dateList.value[i].month) {
      dateList.value[i].iscurrent = true
    }
  }
  heppatientdiaryListFun()
}
defineExpose({
  init
})
</script>

<style lang="less" scoped>
.title-box {
  position: relative;
  height: calc(100vh - 225px);
  padding-right: 12px;
  overflow: hidden auto;

  .dateTime {
    position: absolute;
    top: 10px;
    right: 15px;
  }

  .list {
    padding-top: 60px;

    .aspin {
      text-align: center;
    }

    .nodata {
      color: #666;
      text-align: center;
    }

    .item {
      position: relative;

      .left {
        display: inline-block;
        width: 90px;
        text-align: center;
        vertical-align: top;

        p {
          margin-bottom: 0;
          color: #b5b5b5;

          &:nth-child(1) {
            font-size: 18px;
            color: #323232;
          }
        }
      }

      .min {
        position: absolute;
        top: 10px;
        left: 98px;
        width: 0;
        height: 100%;
        border-right: 1px dotted #aaa;
      }

      .minBorder {
        position: absolute;
        top: 10px;
        left: 95px;
        width: 6px;
        height: 6px;
        background: #aaa;
        border-radius: 50%;
      }

      .right {
        display: inline-block;
        width: calc(100% - 120px);
        margin-left: 30px;
        vertical-align: top;

        .stateList {
          p {
            display: inline-block;
            padding: 2px 10px;
            margin: 0 10px;
            vertical-align: middle;
            background: #d7d7d7;
            border-radius: 6px;
          }
        }

        ::v-deep(.urlImg) {
          margin-bottom: 15px;
          overflow: auto;

          .ant-image {
            width: 70px;
            height: 90px;
            margin: 15px 15px 0 0;

            .img {
              display: block;
              width: 100%;
              height: 100%;
            }
          }
        }

        .content {
          padding-bottom: 15px;
        }
      }
    }
  }
}

.time {
  position: relative;
  z-index: 2;
  width: 60px;
  margin: 0 auto;
  border-radius: 4px;

  &.health-dates {
    margin: 0 auto;
    color: #fff;
    background: #1677ff;

    &:hover {
      background: #1677ff;
      opacity: 0.8 !important;
    }

    &.default-active {
      color: #fff;
    }
  }

  &.default-active {
    margin: 0 auto;
    color: #1677ff;
    border: 1px solid #1677ff;

    &:hover {
      color: #fff;
      background: #1677ff;
      opacity: 0.8 !important;
    }
  }

  &:hover {
    background: #f5f5f5;
  }
}

.health-point {
  position: absolute;
  top: 50px;
  left: 50%;
  display: none;
  width: 6px;
  height: 6px;
  background: #1677ff;
  border-radius: 50%;
  transform: translateX(-50%);

  &.health-active {
    display: block;
  }
}
</style>
